<template>
  <div class="media-form">
    <h2>{{ isEdit ? '编辑媒体' : '添加媒体' }}</h2>
    
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="form-container"
    >
     <el-form-item label="所属社团" prop="clubId">
        <el-select 
          v-model="form.clubId" 
          placeholder="请选择社团" 
          filterable
          :disabled="isEdit && !isAdmin"
          @change="handleClubChange"
        >
          <el-option
            v-for="club in clubOptions"
            :key="club.id"
            :label="club.name"
            :value="club.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属活动" prop="activityId">
        <el-select 
          v-model="form.activityId" 
          placeholder="请选择活动" 
          filterable
          :disabled="isEdit || !form.clubId"
        >
          <el-option
            v-for="activity in filteredActivityOptions"
            :key="activity.id"
            :label="activity.title ? `${activity.title} (ID:${activity.id})` : `活动${activity.id}`"
            :value="activity.id"
          ></el-option>
        </el-select>
      </el-form-item>
      
      <!-- <el-form-item label="媒体类型" prop="mediaType">
        <el-select v-model="form.mediaType" placeholder="请选择媒体类型">
          <el-option label="图片" value="photo"></el-option>
          <el-option label="视频" value="video"></el-option>
        </el-select>
      </el-form-item> -->
      
      <el-form-item label="媒体文件" prop="mediaUrl">
        <div class="upload-container">
          <div class="url-input" v-if="uploadMethod === 'url'">
            <el-input v-model="form.mediaUrl" placeholder="请输入媒体文件URL"></el-input>
            <div class="form-tip">请输入媒体文件的URL地址</div>
          </div>
          <div class="file-upload" v-else>
            <el-upload
              class="upload-component"
              :action="''"
              :auto-upload="false"
              :on-change="handleFileChange"
              :on-exceed="handleExceed"
              :before-upload="beforeUpload"
              :limit="1"
              :file-list="fileList"
            >
              <el-button type="primary">选择文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  支持jpg、png、gif图片文件
                </div>
              </template>
            </el-upload>
          </div>
          <div class="switch-method">
            <el-link type="primary" @click="switchUploadMethod">
              {{ uploadMethod === 'url' ? '切换到本地上传' : '切换到URL输入' }}
            </el-link>
          </div>
        </div>
      </el-form-item>
      
      <!-- <el-form-item label="媒体预览">
        <div v-if="form.mediaType === 'photo' && form.mediaUrl">
          <el-image 
            style="width: 200px; max-height: 150px"
            :src="getMediaUrl(form.mediaUrl)" 
            :preview-src-list="[getMediaUrl(form.mediaUrl)]"
            fit="contain"
          ></el-image>
        </div>
        <div v-else-if="form.mediaType === 'video' && form.mediaUrl">
          <el-button type="primary" @click="previewVideo">预览视频</el-button>
        </div>
        <div v-else class="empty-preview">
          暂无预览
        </div>
      </el-form-item> -->
      
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
    
    <!-- 视频预览弹窗 -->
    <!-- <el-dialog
      v-model="videoDialogVisible"
      title="视频预览"
      width="800px"
      destroy-on-close
    >
      <video 
        v-if="form.mediaUrl" 
        controls 
        style="width: 100%"
        :src="getFullMediaUrl(form.mediaUrl)"
        @error="handleVideoError"
      ></video>
      <div v-if="videoErrorMsg" class="video-error">
        {{ videoErrorMsg }}
      </div>
    </el-dialog> -->
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getMediaDetail, addMedia, updateMedia, uploadMediaFile } from '@/api/media'
import { getActivityList } from '@/api/activity'
import { useUserStore } from '@/store/user'
import { getMediaUrl } from '@/utils/mediaUrl'
import { getClubList } from '@/api/club'
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const formRef = ref(null)
const activityOptions = ref([])
const videoDialogVisible = ref(false)
const videoErrorMsg = ref('')
const uploadMethod = ref('url') // 'url' 或 'file'
const fileList = ref([])
const selectedFile = ref(null)
const clubOptions = ref([])
// 用户信息
const userInfo = computed(() => userStore.userInfo)
const isAdmin = computed(() => userInfo.value.role === 'admin')
const isClubLeader = computed(() => userInfo.value.role === 'club_leader')

// 是否为编辑模式
const isEdit = computed(() => {
  return route.params.id !== undefined
})

// 表单数据
const form = reactive({
  clubId: null,
  activityId: null,
  mediaType: 'photo',
  mediaUrl: ''
})

// 根据选择的社团过滤活动列表
const filteredActivityOptions = computed(() => {
  if (!form.clubId) return []
  return activityOptions.value.filter(activity => activity.clubId === form.clubId)
})

// 处理社团变更
const handleClubChange = () => {
  // 当社团变更时，清空已选择的活动
  form.activityId = null
}

// 表单校验规则
const rules = reactive({
    clubId: [
    { required: true, message: '请选择社团', trigger: 'change' }
  ],
  activityId: [
    { required: true, message: '请选择所属活动', trigger: 'change' }
  ],
  mediaType: [
    { required: true, message: '请选择媒体类型', trigger: 'change' }
  ],
  mediaUrl: [
    { required: true, message: '请输入媒体文件URL或上传文件', trigger: 'blur' },
    { max: 255, message: 'URL长度不能超过255个字符', trigger: 'blur' }
  ]
})

// 切换上传方式
const switchUploadMethod = () => {
  uploadMethod.value = uploadMethod.value === 'url' ? 'file' : 'url'
  // 切换到URL输入时清空已选文件
  if (uploadMethod.value === 'url') {
    fileList.value = []
    selectedFile.value = null
  }
}

// 处理文件变更
const handleFileChange = (file) => {
  fileList.value = [file]
  selectedFile.value = file.raw
  
  // 如果是图片，可以创建本地预览URL
  if (form.mediaType === 'photo' && file.raw) {
    form.mediaUrl = URL.createObjectURL(file.raw)
  
  } else if (form.mediaType === 'video' && file.raw) {
    form.mediaUrl = URL.createObjectURL(file.raw)
  }
}
// 加载社团列表
const loadClubs = async () => {
  try {
    let params = { pageSize: 1000 }
    
    // 如果是社团负责人且不是管理员，只能看到自己管理的社团
    if (isClubLeader.value && !isAdmin.value) {
      params.leaderId = userInfo.value.id
    }
    const res = await getClubList(params)
    if (res.data && res.code === 200) {
      clubOptions.value = res.data.list
      
      // 如果是社团负责人且不是管理员，默认选择第一个社团
      if (!isEdit.value && isClubLeader.value && !isAdmin.value && clubOptions.value.length > 0) {
        form.clubId = clubOptions.value[0].id
      }
    } else {
      ElMessage.error(res.message || '获取社团列表失败')
    }
  } catch (error) {
    console.error('获取社团列表出错:', error)
    ElMessage.error('获取社团列表失败')
  }
}
// 加载活动列表
const loadActivities = async () => {
  try {
    let params = { pageSize: 1000 }
    
    // 如果是社团负责人且不是管理员，只能看到自己社团的活动
    if (isClubLeader.value && !isAdmin.value) {
      // 这里假设后端API支持按社团负责人ID筛选活动
      // 实际实现时可能需要先获取用户负责的社团，再按社团ID筛选活动
      params.leaderFilter = true
    }
    
    const res = await getActivityList(params)
    if (res.data && res.code === 200) {
      activityOptions.value = res.data.list
      console.log('表单页活动列表数据:', activityOptions.value)
      
      // 检查数据格式
      if (activityOptions.value && activityOptions.value.length > 0) {
        console.log('第一个活动的属性:', Object.keys(activityOptions.value[0]))
      }
    } else {
      ElMessage.error(res.message || '获取活动列表失败')
    }
  } catch (error) {
    console.error('获取活动列表出错:', error)
    ElMessage.error('获取活动列表失败')
  }
}

// 获取媒体详情
const getMediaInfo = async (id) => {
  try {
    const res = await getMediaDetail(id)
    if (res.code === 200 && res.data) {
      // 填充表单数据
      form.clubId = res.data.clubId || (res.data.activity ? res.data.activity.clubId : null)
      form.activityId = res.data.activityId
      form.mediaType = res.data.mediaType
      form.mediaUrl = res.data.mediaUrl
      
      // 检查权限
      if (isClubLeader.value && !isAdmin.value) {
        // 检查是否有权限编辑该媒体（是否属于自己管理的社团的活动）
        // 这里简化处理，实际应该检查媒体所属活动的社团是否由当前用户管理
        if (!canManageMedia(res.data)) {
          ElMessage.error('您无权编辑此媒体')
          goBack()
        }
      }
    } else {
      ElMessage.error(res.message || '获取媒体信息失败')
      goBack()
    }
  } catch (error) {
    console.error('获取媒体详情出错:', error)
    ElMessage.error('获取媒体信息失败')
    goBack()
  }
}

// 判断当前用户是否可以管理该媒体
const canManageMedia = (media) => {
  if (!isClubLeader.value || !media || !media.activity) return false
  
  // 如果是社团负责人，只能管理自己社团的活动的媒体
  const clubId = media.activity.clubId
  if (clubId) {
    // 这里简化处理，实际应该检查该社团是否由当前用户管理
    return true
  }
  
  return false
}

// 获取完整的媒体URL
const getFullMediaUrl = (url) => {
  return getMediaUrl(url);
}

// 处理视频加载错误
const handleVideoError = (e) => {
  console.error('视频加载失败:', e);
  const videoElement = e.target;
  const errorCode = videoElement.error ? videoElement.error.code : '未知';
  const errorMessage = videoElement.error ? videoElement.error.message : '未知错误';
  
  videoErrorMsg.value = `视频加载失败 (错误码: ${errorCode})，错误信息: ${errorMessage}`;
  
  // 打印视频元素信息
  console.log('视频元素:', videoElement);
  console.log('视频URL:', videoElement.src);
  console.log('视频状态:', {
    readyState: videoElement.readyState,
    networkState: videoElement.networkState,
    paused: videoElement.paused,
    error: videoElement.error
  });
}

// 预览视频
const previewVideo = () => {
  if (form.mediaUrl) {
    // 清除之前的错误信息
    videoErrorMsg.value = '';
    videoDialogVisible.value = true;
    
    // 打印调试信息
    console.log('原始视频URL:', form.mediaUrl);
    console.log('处理后的预览视频URL:', getFullMediaUrl(form.mediaUrl));
    
    // 计划在视频弹窗打开后进行额外检查
    setTimeout(() => {
      const videoElement = document.querySelector('.el-dialog video');
      if (videoElement) {
        console.log('视频元素存在，可播放状态:', !videoElement.error);
        if (videoElement.error) {
          console.error('视频错误码:', videoElement.error.code);
          videoErrorMsg.value = `视频加载失败 (错误码: ${videoElement.error.code})，请检查视频格式或网络连接`;
        }
      } else {
        console.error('未找到视频元素');
      }
    }, 500);
  } else {
    ElMessage.warning('请先输入视频URL或上传视频文件');
  }
}

// 上传文件
const uploadFile = async () => {
  if (!selectedFile.value) {
    return Promise.reject(new Error('请选择要上传的文件'))
  }
  
  try {
    const res = await uploadMediaFile(selectedFile.value)
    if (res.code === 200 && res.data) {
      // 上传成功，返回服务器的文件URL
      form.mediaUrl = res.data
      return Promise.resolve()
    } else {
      return Promise.reject(new Error(res.message || '文件上传失败'))
    }
  } catch (error) {
    console.error('文件上传出错:', error)
    return Promise.reject(new Error('文件上传失败: ' + error.message))
  }
}

// 文件类型和大小验证
const beforeUpload = (file) => {
  // 文件类型验证
  const isValidType = validateFileType(file)
  if (!isValidType) {
    ElMessage.error('不支持的文件类型！图片请使用jpg/png/gif')
    return false
  }
  
  // 文件大小验证 (50MB = 52428800 bytes)
  const isLessThan50MB = file.size < 52428800
  if (!isLessThan50MB) {
    ElMessage.error('文件大小不能超过50MB')
    return false
  }
  
  return true
}

// 验证文件类型
const validateFileType = (file) => {
  // 图片类型
  const imageTypes = ['image/jpeg', 'image/png', 'image/gif']
  // 视频类型
  const videoTypes = ['video/mp4']
  
  if (form.mediaType === 'photo') {
    return imageTypes.includes(file.type)
  } else if (form.mediaType === 'video') {
    return videoTypes.includes(file.type)
  }
  
  return false
}

// 处理超出文件数量限制
const handleExceed = () => {
  ElMessage.warning('最多只能上传一个文件')
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    // 如果是文件上传方式，且选择了文件，先上传文件
    if (uploadMethod.value === 'file' && selectedFile.value) {
      try {
        await uploadFile()
      } catch (error) {
        ElMessage.error('11',error.message)
        return
      }
    }
    
    if (isEdit.value) {
      // 编辑媒体
      const id = route.params.id
      const res = await updateMedia(id, form)
      if (res.code === 200) {
        ElMessage.success('更新成功')
        goBack()
      } else {
        ElMessage.error(res.message || '更新失败')
      }
    } else {
      // 添加媒体
      const res = await addMedia(form)
      if (res.code === 200) {
        ElMessage.success('添加成功')
        goBack()
      } else {
        ElMessage.error(res.message || '添加失败')
      }
    }
  } catch (error) {
    console.error('表单验证失败:', error)
    ElMessage.error('表单数据不完整或格式不正确')
  }
}

// 返回上一页
const goBack = () => {
  router.push('/media')
}

// 初始化
onMounted(() => {
  loadClubs()
  loadActivities()
  
  if (isEdit.value && route.params.id) {
    getMediaInfo(route.params.id)
  }
})
</script>

<style scoped>
.form-container {
  width: 500px;
  margin: 0 auto;
}

.upload-container {
  display: flex;
  flex-direction: column;
}

.switch-method {
  margin-top: 10px;
}

.empty-preview {
  color: #ccc;
}

.el-upload__tip {
  color: #888;
}

.video-error {
  color: red;
}
</style>




<style scoped>
.media-form {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-container {
  margin-top: 20px;
  max-width: 800px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.empty-preview {
  color: #909399;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
  text-align: center;
}

.upload-container {
  display: flex;
  flex-direction: column;
}

.switch-method {
  margin-top: 10px;
  font-size: 14px;
}

.upload-component {
  width: 100%;
}

.video-error {
  color: #f56c6c;
  margin-top: 10px;
  text-align: center;
  padding: 10px;
  background-color: #fef0f0;
  border-radius: 4px;
}
</style>